<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useGiftStoreHook } from "@/store/modules/gift-list";
import { type GiftInfo } from "@/api/gift"
defineOptions({
  name: "user-gift",
});

const BREADLIST = [
  { name: "用户中心", path: "#" },
  { name: "礼品兑换", path: "/user/gift" },
];

const productList = ref<Array<GiftInfo>>([
  {
    goodsid: 0,
    name: "辰星生物",
    desc: "",
    photo: "",
    point: 1,
    inventory: 0,
  },
])

onMounted(() => {
  useGiftStoreHook().getAllGifts().then((res) => {
    console.log(res);
    productList.value = res
  })

})
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="pb-[12px]">
    <el-breadcrumb-item v-for="item in BREADLIST" :to="item.path">{{
      item.name
    }}</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 礼品卡片区域 -->
  <div class="item-block flex flex-wrap justify-between">
    <div
      class="card w-[40vw] md:w-[170px] box-content p-[12px] border-[#e5e5e5] border-solid border-[1px] mb-[10px] xl:w-[290px] h-[310px]"
      v-for="item in productList">
      <router-link class="no-underline text-[#000]" :to="'/user/gift/exchange/' + item.goodsid">
        <div class="bg-wite">
          <img :src="item.photo" alt="" class="w-full h-[195px] xl:h-[200px] object-contain" />
        </div>
        <div class="info text-left xl:text-center">
          <div>{{ item.name }}</div>
          <div class="text-[#7f7f7f] text-[12px] py-2">{{ item.desc }}</div>
          <div class="py-[12px] font-bold">{{ item.inventory == 0 ? "库存不足" : item.point + " 积分" }} </div>
        </div>
      </router-link>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.item-block i {
  width: 290px;
  margin-left: 20px;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 26px;
}
</style>
